<!DOCTYPE html>
<html>
<head>
<style type="text/css">

</style>
<title>svg+canvas+html 转 图片</title>
</head>
<body>

<div id="svg">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="border:1px solid #f00;" width="300" height="300">
	<circle cx="100" cy="100" r="50" stroke="black"stroke-width="2" fill="red" />
  	<foreignObject width="300" height="300" transform="translate(100,50)">
		<div xmlns="http://www.w3.org/1999/xhtml">wwwwwwwwwwwww</div>
    </foreignObject>
  	<foreignObject width="300" height="300" style="color:#f00;font-size:40px;">
		<div xmlns="http://www.w3.org/2000/xhtml">
			<div>
			dfs<span></span>sdf
			</div>
		</div>
    </foreignObject>
  	<foreignObject width="300" height="300">
		<div style="position:absolute;top:50px;left:20px;" xmlns="http://www.w3.org/2000/xhtml">
		<canvas id="canvas" style="width:100px;height:100px;"></canvas>
		</div>
    </foreignObject>
</svg>
</div>

<img id="result" src="" style="display: block;"/>

</body>
</html>
<script type="text/javascript">
var svg = document.getElementById("svg");
var canvas_w,canvas_h,canvas_x,canvas_y;
var canvas = document.getElementById("canvas"); //foreignObject里的canvas
var ctx = canvas.getContext("2d");
ctx.fillStyle="#00f";
ctx.fillRect(0,0,150,75);

/*无px单位*/
canvas_x = canvas.offsetLeft;
canvas_y = canvas.offsetTop;
canvas_w = canvas.offsetWidth;
canvas_h = canvas.offsetHeight;

//alert(canvas_x+","+canvas_y+","+canvas_w+","+canvas_h);

// var imgCan = document.createElement("img");
// imgCan.style.width=c.style.width;
// imgCan.style.height=c.style.height;
// imgCan.src = c.toDataURL('image/png');
// foreignObject = svg.getElementsByTagName("foreignObject")[0];

// foreignObject.appendChild(imgCan);

//方法一
var data = "data:image/svg+xml;charset=utf-8,";
data = data + svg.innerHTML;
var img = new Image();
img.src = data;
//document.getElementsByTagName("body")[0].appendChild(img);

//方法二
// var data = "data:image/svg+xml;base64,";
// data = data + window.btoa(unescape(encodeURIComponent(svg.innerHTML)));
// var img = new Image();
// img.src = data;
// console.log(img.src);
var result = document.getElementById("result");

var saveCanvas = document.createElement('canvas');
saveCanvas.setAttribute("width","300");
saveCanvas.setAttribute("height","300");
var context = saveCanvas.getContext('2d');

context.drawImage(canvas,canvas_x,canvas_y,canvas_w,canvas_h);
context.drawImage(img, 0, 0);

result.src = saveCanvas.toDataURL('image/png');
console.log(result.src);
</script>